import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { View, Text, Image } from '@tarojs/components';
import './Servers.less';
import { AtTextarea } from 'taro-ui'
import "taro-ui/dist/style/components/textarea.scss";
import ChooseImageView from '@/pages/common/image-upload/choose-image-view';

import icon from './img/icon.png'

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class Servers extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  render() {
    let {
      main: { requirements, deliveryFee },
      actions: { action },
    } = this.props;
    return (
      <View className="componentServers">
        <>
          <View>
            <View className='row ai-c'>
              <Text className='info'>具体服务需求</Text>
              <View className='row ai-c' onClick={() => action.commonChange('main.showRequirements', true)}>
                <Image className="icon" src={icon} mode="widthFix" />
                <Text className='info-d'>填写示例</Text>
              </View>
            </View>

            <AtTextarea
              value={requirements}
              onChange={(requirements) => { action.commonChange('main.requirements', requirements?.substring?.(0, 500)) }}
              maxLength={500}
              placeholder='请输入您的取件信息内容，例如取件短信..'
              placeholderStyle='font-size:12px'
            />

            <View style={{ marginLeft: '-4vw', marginTop: 6, marginBottom: 6 }}>
              <ChooseImageView maxCount="1" onFileChange={(item) => { item?.length ? action.commonChange('main.imgUrl', item[0].url) : action.commonChange('main.imgUrl', '') }} />
            </View>

            <View className='row ai-c jc-sb'>
              <Text className='title'>配送费</Text>
              <Text className='delivery-fee'>{deliveryFee || '--'}积分</Text>
            </View>
          </View>
        </>
      </View>
    );
  }
}
